<script lang="ts" setup>
import UseBtn from '@/components/use-btn/index.vue'
import { TodoStatus, TodoTask } from '@/models/task'
import dayjs from 'dayjs'

const props = withDefaults(
  defineProps<{
    itemData: TodoTask
  }>(),
  {},
)

watch(
  props.itemData,
  (val) => {
    overTextOpen.value = val.status === TodoStatus.Completed
  },
  {
    deep: true,
  },
)

const overTextOpen = ref(props.itemData.status === TodoStatus.Completed)

const time = computed(() => {
  if (!props.itemData.deadline) {
    return '- -'
  }
  return dayjs(props.itemData.deadline)?.format('YYYY-MM-DD HH:mm')
})

function checkClick() {
  if (props.itemData.status === TodoStatus.Completed) return
  overTextOpen.value = !overTextOpen.value

  emit('doneChange')
}

const emit = defineEmits(['openChat', 'doneChange'])
function openChat() {
  emit('openChat')
}
</script>

<template>
  <view class="list-view" :style="overTextOpen && 'border: 1rpx solid #dddddd'">
    <view class="flex justify-between mb-3">
      <view class="flex items-center">
        <view v-if="overTextOpen" class="check-icon" @click="checkClick"></view>
        <view v-else class="not-check-icon" @click="checkClick"></view>
        <view class="time" :style="itemData.status === TodoStatus.Expired ? 'color: #ff4d07' : ''">
          截止时间:{{ time }}
        </view>
      </view>
      <UseBtn :font-size="28" :width="152" :height="60" @click="openChat">打开对话</UseBtn>
    </view>
    <view class="user-chat">{{ itemData.content }}</view>
  </view>
</template>

<style lang="scss" scoped>
.check-icon {
  width: 40rpx;
  height: 40rpx;
  background: url('@/static/images/index/check-icon.png') no-repeat;
  background-size: 100% 100%;
}

.time {
  margin-left: 20rpx;
  font-family:
    PingFangSC,
    PingFang SC;
  font-size: 26rpx;
  font-weight: 400;
  color: #6a707c;
}

.not-check-icon {
  width: 40rpx;
  height: 40rpx;
  background: url('@/static/images/index/not-check-icon.png') no-repeat;
  background-size: 100% 100%;
}
.btn {
  box-sizing: border-box;
  padding: 10rpx 20rpx;
  font-family:
    PingFangSC,
    PingFang SC;
  font-size: 28rpx;
  font-weight: 500;
  color: #2b2f36;
  background: linear-gradient(85deg, #fcff5e 0%, #cfff69 49%, #6efffd 100%), #ffdb00;
  border-radius: 30rpx;
}
.btn:active {
  opacity: 0.8;
}
@mixin btn-center($url) {
  width: 60rpx;
  height: 60rpx;
  background: url($url) no-repeat;
  background-size: 100% 100%;

  &:active {
    border-radius: 50%;
    opacity: 0.5;
  }
}
.copy-btn {
  @include btn-center('@/static/images/index/copy-icon.png');
}
.refresh-btn {
  @include btn-center('@/static/images/index/refresh-icon.png');
}
.like-btn {
  @include btn-center('@/static/images/index/like-icon.png');
}
.edit-input {
  box-sizing: border-box;
  min-height: 124rpx;
  padding: 24rpx;
  border: 2rpx solid #dddddd;
  border-radius: 16rpx;
  textarea {
    width: 100%;
    min-height: 124rpx;
    font-size: 28rpx;
  }
}
.ai-view {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100rpx;
  .logo {
    width: 60rpx;
    height: 60rpx;
  }
  .desc {
    margin-left: 24rpx;
    font-family:
      PingFangSC,
      PingFang SC;
    font-size: 28rpx;
    font-weight: 400;
    color: #6a707c;
  }
  .tips {
    font-family:
      PingFangSC,
      PingFang SC;
    font-size: 26rpx;
    font-weight: 400;
    color: #1876ff;
  }
}
.user-chat {
  position: relative;
  box-sizing: border-box;
  padding: 24rpx;
  overflow: hidden;
  font-family:
    PingFangSC,
    PingFang SC;
  font-size: 28rpx;
  font-weight: 400;
  line-height: 42rpx;
  color: #2b2f36;

  text-align: justify;
  background: #f8f8f8;
  border-radius: 16rpx;
}
.arrow-down {
  position: absolute;
  right: 20rpx;
  bottom: 23rpx;
  display: inline-block;
  width: 40rpx;
  height: 40rpx;
  background: url('@/static/images/sys/arrow-down.png') no-repeat;
  background-size: 100% 100%;
}
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40rpx;
  padding: 0 8rpx;
  font-family:
    PingFangSC,
    PingFang SC;
  font-size: 22rpx;
  font-weight: 400;
  color: #2b2f36;
  border-radius: 8rpx;
}
.list-view {
  box-sizing: border-box;
  padding: 32rpx;
  margin: 0 32rpx 24rpx 32rpx;
  background: #ffffff;
  border: 1rpx solid #2b2f36;
  border-radius: 24rpx;
}
</style>
